<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/metrize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/polaris/polaris.css" rel="stylesheet">
    <link href="css/square/blue.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="header-content header-fixed bg-white clearfix">
    <!--  Logo -->
    <div class="logo bg-dark">
        <a href="#"><span class="logo-icon fa fa-th-large"></span> <span class="logo-text">JP</span></a>
    </div>

    <div class="top-nav">
        <ul class="list-none nav-left">
            <!-- to left menu -->
            <li class="unshow"><a class="toggle-min jp-gray jp-ripple" href="#"><i class="fa fa-bars"></i></a></li>
            <!-- dropdown settings -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown" id="dropdownMenu2"><i class="fa fa-gear"></i></a>
                <div class="dropdown-menu panel panel-default with-arrow" aria-labelledby="dropdownMenu2">
                    <div class="panel-heading"><span>Setting</span></div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <p>User setting</p>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <p>User setting</p>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option1"> 2
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option1"> 3
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-truck"></i></a></li>
        </ul>

        <ul class="list-none nav-right pull-right">
            <!-- user info-->
            <li class="nav-profile dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown"><img src="img/t.jpg" class="img-circle img30_30" /> <span class="hidden-xs">LISA</span></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#"><i class="fa fa-dashboard"></i>Action</a></li>
                    <li><a href="#"><i class="fa fa-television"></i>Another action</a></li>
                    <li><a href="#"><i class="fa fa-file-o"></i>Something else here</a></li>
                    <li><a href="#"><i class="fa fa-table"></i>Separated link</a></li>
                </ul>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-wifi"></i></a></li>
        </ul>
    </div>

</header>
<div class="main-content">
    <!-- left nav -->
    <div class="nav-content bg-dark nav-vertical">
        <ul class="left-menu list-none">
            <li class="user-info">
                <div class="user-panel">
                    <div class="pull-left">
                        <img src="img/t.jpg" class="img-circle img45_45"/>
                    </div>
                    <div class="pull-left info">
                        <p>welcome,admin</p>
                        <a href="#"><i class="fa fa-circle"></i> online</a>
                    </div>
                </div>
                <form class="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </li>
            <li class="treeview ">
                <a href="main.html" class="jp-ripple"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
            </li>
            <li class="treeview active">
                <a href="#" class="jp-ripple"><i class="fa fa-television"></i><span>JP UI</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Buttons.html" ><i class="fa fa-circle ng-scope"></i><span>Buttons</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Icons.html" ><i class="fa fa-circle ng-scope"></i><span>Icons</span></a></li>
                    <li class="jp-ripple"><a href="Typography.html"><i class="fa fa-circle ng-scope"></i><span>Typography</span></a></li>
                    <li class="active jp-ripple"><a href="Lists.html" ><i class="fa fa-circle ng-scope"></i><span>Lists</span></a></li>
                    <li class="jp-ripple"><a href="Forms.html" ><i class="fa fa-circle ng-scope"></i><span>Forms</span></a></li>
                    <li class="jp-ripple"><a href="Components.html" ><i class="fa fa-circle ng-scope"></i><span>Components</span></a></li>
                    <li class="jp-ripple"><a href="Panels.html" ><i class="fa fa-circle ng-scope"></i><span>Panels</span></a></li>
                    <li class="jp-ripple"><a href="Grids.html"><i class="fa fa-circle ng-scope"></i><span>Grids</span></a></li>
                    <li class="jp-ripple"><a href="Timeline.html"><i class="fa fa-circle ng-scope"></i><span>Timeline</span></a></li>
                    <li class="jp-ripple"><a href="Tree.html"><i class="fa fa-circle ng-scope"></i><span>Tree</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-file-o"></i><span>Pages</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="SignIn.html"><i class="fa fa-circle ng-scope"></i><span>Sign In</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="SignUp.html"><i class="fa fa-circle ng-scope"></i><span>Sign Up</span></a></li>
                    <li class="jp-ripple"><a href="ForgotPassword.html"><i class="fa fa-circle ng-scope"></i><span>Forgot Password</span></a></li>
                    <li class="jp-ripple"><a href="404.html"><i class="fa fa-circle ng-scope"></i><span>404 Error</span></a></li>
                    <li class="jp-ripple"><a href="500.html"><i class="fa fa-circle ng-scope"></i><span>500 Error</span></a></li>
                    <li class="jp-ripple"><a href="Blank.html"><i class="fa fa-circle ng-scope"></i><span>Blank Page</span></a></li>
                    <li class="jp-ripple"><a href="Profile.html"><i class="fa fa-circle ng-scope"></i><span>Profile</span></a></li>
                    <li class="jp-ripple"><a href="Invoice.html"><i class="fa fa-circle ng-scope"></i><span>Invoice</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-table"></i><span>Tables</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Basetable.html"><i class="fa fa-circle ng-scope"></i><span>Base Table</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Responsivetables.html"><i class="fa fa-circle ng-scope"></i><span>Responsive Tables</span></a></li>
                    <li class="jp-ripple"><a href="DataTables.html"><i class="fa fa-circle ng-scope"></i><span>Data Tables</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-pencil"></i><span>Forms</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="FormComponents.html"><i class="fa fa-circle ng-scope"></i><span>Form Components</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="WizardForm.html"><i class="fa fa-circle ng-scope"></i><span>Wizard Form</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-bar-chart"></i><span>Charts</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="EChartsLine.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Line</span></a></li>
                    <li class="jp-ripple"><a href="EChartsBar.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Bar</span><span class="badge badge-primary ng-scope">5</span></a></li>
                    <li class="jp-ripple"><a href="EChartsPie.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Pie</span></a></li>
                    <li class="jp-ripple"><a href="EChartsScatter.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Scatter</span></a></li>
                </ul>
            </li>
            <li class="menu-divider"></li>
            <li class="nav-title">
                <span>Title</span>
            </li>
            <li class="li-sm active">
                <a href="#"><i class="fa fa-circle color-info"></i><span>JP Components</span></a>
            </li>
            <li class="li-sm treeview">
                <a href="#"><i class="fa fa-circle color-success"></i><span>JP Elements</span></a>
            </li>
        </ul>

    </div>
    <!-- content -->
    <div class="content">
        <section class="jppage">
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">List</h2>
            </div>
            <!-- List -->
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-heading jp-gray">Action Checkboxes</div>
                        <div class="panel-body">
                            <ul class="list-none jp-list-action">
                                <li><div class="jp-list-item jp-ripple jp-gray">
                                    <p>List 1</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray">
                                    <p>List 2</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray">
                                    <p>List 3</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                            </ul>
                        </div>
                    </div>

                </div>


                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-heading jp-gray">Action Checkboxes 2</div>
                        <div class="panel-body">
                            <ul class="list-none jp-list-action-h">
                                <li><div class="jp-list-item jp-ripple jp-gray">
                                    <div class="jp-list-icon"><i class="fa fa-camera"></i></div>
                                    <p>List 1</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray">
                                    <div class="jp-list-icon"><i class="fa fa-cart-plus"></i></div>
                                    <p>List 2</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray">
                                    <div class="jp-list-icon"><i class="fa fa-cloud"></i></div>
                                    <p>List 3</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-heading jp-gray">Avatar with Secondary Action Icon</div>
                        <div class="panel-body">
                            <ul class="list-none jp-list-action-h">
                                <li><div class="jp-list-item jp-ripple jp-gray" data-toggle="modal" data-target="#show_mesg">
                                    <p>List 1</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray" data-toggle="modal" data-target="#show_mesg">
                                    <p>List 2</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray" data-toggle="modal" data-target="#show_mesg">
                                    <p>List 3</p>
                                    <div class="bcheck"><input type="checkbox" checked></div>
                                </div></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-heading jp-gray">Avatar with Secondary Action Icon</div>
                        <div class="panel-body">
                            <ul class="list-none jp-list-action-h">
                                <li><div class="jp-list-item jp-ripple jp-gray" data-toggle="modal" data-target="#show_mesg">
                                    <img src="img/t.jpg" class="img-circle img40_40 jp-list-icon">
                                    <p>List 1</p>
                                    <div class="showbox" data-target="#show_mesg2"><i class="fa fa-commenting-o"></i></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray" data-toggle="modal" data-target="#show_mesg">
                                    <img src="img/t.jpg" class="img-circle img40_40 jp-list-icon">
                                    <p>List 2</p>
                                    <div class="showbox" data-target="#show_mesg2"><i class="fa fa-commenting-o"></i></div>
                                </div></li>
                                <li><div class="jp-list-item jp-ripple jp-gray" data-toggle="modal" data-target="#show_mesg">
                                    <img src="img/t.jpg" class="img-circle img40_40 jp-list-icon">
                                    <p>List 3</p>
                                    <div class="showbox" data-target="#show_mesg2"><i class="fa fa-commenting-o"></i></div>
                                </div></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="modal fade modal-sm" id="show_mesg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
                            </div>
                    <div class="modal-body">
                        Have a bunch of buttons that all trigger the same modal, just with slightly different contents?
                    </div>
                            <div class="modal-footer">
                                <button type="button" class="btn jp-btn jp-default jp-sw jp-gray jp-ripple" data-dismiss="modal">Close</button>
                            </div>
                </div>

                <div class="modal fade modal-sm" id="show_mesg2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Modal Message</h4>
                    </div>
                    <div class="modal-body">
                        Varying modal content based on trigger button
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn jp-btn jp-default jp-sw jp-gray jp-ripple" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">List Group</h2>
            </div>
            <!-- List Group -->
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">Cras justo odio</li>
                                <li class="list-group-item">Dapibus ac facilisis in</li>
                                <li class="list-group-item">Morbi leo risus</li>
                                <li class="list-group-item">Porta ac consectetur ac</li>
                                <li class="list-group-item">Vestibulum at eros</li>
                            </ul>
                            <span class="panel-label">Normal</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
                                <li class="list-group-item"><span class="badge jp-warning">10</span>Dapibus ac facilisis in</li>
                                <li class="list-group-item"><span class="badge jp-info">4</span>Morbi leo risus</li>
                                <li class="list-group-item"><span class="badge jp-dark">2</span>Porta ac consectetur ac</li>
                                <li class="list-group-item"><span class="badge jp-danger">0</span>Vestibulum at eros</li>
                            </ul>
                            <span class="panel-label">With Badges</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="javascript:;" class="list-group-item active"> Cras justo odio </a>
                                <a href="javascript:;" class="list-group-item">Dapibus ac facilisis in</a>
                                <a href="javascript:;" class="list-group-item">Morbi leo risus</a>
                                <a href="javascript:;" class="list-group-item">Porta ac consectetur ac</a>
                                <a href="javascript:;" class="list-group-item">Vestibulum at eros</a>
                            </div>
                            <span class="panel-label">Linked items</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="list-group">
                                <a href="javascript:;" class="list-group-item disabled">
                                    Cras justo odio
                                </a>
                                <a href="javascript:;" class="list-group-item">Dapibus ac facilisis in</a>
                                <a href="javascript:;" class="list-group-item">Morbi leo risus</a>
                                <a href="javascript:;" class="list-group-item">Porta ac consectetur ac</a>
                                <a href="javascript:;" class="list-group-item">Vestibulum at eros</a>
                            </div>
                            <span class="panel-label">Disabled items</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Media</h2>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="media-list media-divider-full">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object img-circle img64_64"  src="img/t.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                        </p>
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object img-circle img64_64"  src="img/t.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                        </p>
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object img-circle img64_64"  src="img/t.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <span class="panel-label">Full</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="media-list media-divider-inset">
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object img-circle img64_64" src="img/t.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                        </p>
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object img-circle img64_64" src="img/t.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                        </p>
                                    </div>
                                </div>
                                <div class="media">
                                    <div class="media-left">
                                        <a href="#">
                                            <img class="media-object img-circle img64_64" src="img/t.jpg" alt="...">
                                        </a>
                                    </div>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <span class="panel-label">Inset</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Sortable</h2>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <ul id="sortable">
                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
                                <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>
</div>






<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/treeview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/jpripple.js"></script>
<script src="js/all.js"></script>
<script>
    $(document).ready(function(){
        ListInit();
    });
</script>
</body>
</html>